<template>
  <div>
    <div>
      <swiper auto :list="slides" height="200px"></swiper>
    </div>

    <flexbox :gutter="0" wrap="wrap" class="list">
    <flexbox-item :span="1/5" class="icon-list" @click.native="goView(2)"><span class="demo-icon icon-list-span">&#xe634;</span><p class="icon-list-p">学校简介</p></flexbox-item>
    <flexbox-item :span="1/5" class="icon-list" @click.native="goView(3)"><span class="demo-icon icon-list-span">&#xe694;</span><p class="icon-list-p">先培后付</p></flexbox-item>
    <flexbox-item :span="1/5" class="icon-list" @click.native="goView(10)"><span class="demo-icon icon-list-span">&#xe60b;</span><p class="icon-list-p">学校荣誉</p></flexbox-item>
    <flexbox-item :span="1/5" class="icon-list" @click.native="goView(16)"><span class="demo-icon icon-list-span">&#xe674;</span><p class="icon-list-p">学校环境</p></flexbox-item>
    <flexbox-item :span="1/5" class="icon-list" @click.native="goView(14)"><span class="demo-icon icon-list-span">&#xe6ee;</span><p class="icon-list-p">历史沿革</p></flexbox-item>
    </flexbox>

    <card>
    <div slot="content" class="card-padding">
      <swiper auto height="30px" direction="vertical" :interval=4000 class="text-scroll" :show-dots="false">
      <swiper-item v-for="(notice, index) in notices" :key="index">
        <router-link :to="'/article/view/' + notice.id">
        <p style="font-size:14px;color:red;line-height:30px;">{{ notice.title }}</p>
				</router-link>
      </swiper-item>
      </swiper>
    </div>
    </card>

    <divider style="margin-top:10px;margin-bottom:10px;color:red;">公司客服: <a href="tel:0578-2682232" style="color:red">0578-2682232</a></divider>

    <tab>
      <tab-item v-for="(item, index) in leadCategorys" :key="index" @on-item-click="currentCategory = item.id" :selected="currentCategory == item.id">{{ item.title }}</tab-item>
    </tab>

    <card style="margin-top:0px;">
    <div slot="content" class="card-padding">
      <flexbox :gutter="0" wrap="wrap">
      <flexbox-item :span="1/2" class="shoplist" v-for="(lead, index) in leads" :key="index">
        <router-link :to="'/shop/view/' + lead.id">
          <div>
            <img :src="lead.thumb + '?x-oss-process=image/resize,w_200'" width="100%">
          </div>
          <div style="text-align:center;color:#565656;padding-bottom:10px;">{{ lead.title }}</div>
        </router-link>
      </flexbox-item>
      </flexbox>
    </div>
    </card>

  </div>
</template>

<script>
import { Tab, TabItem, ViewBox, Swiper, Card, SwiperItem, Divider, Flexbox, FlexboxItem } from 'vux'
import { article as articleAPI, category as categoryAPI } from '@/server/getData'

export default {
  components: {
    Tab,
    TabItem,
    ViewBox,
    Card,
    Flexbox,
    FlexboxItem,
    Swiper,
    SwiperItem,
    Divider
  },
  data () {
    return {
      leads: [],
      currentCategory: 11,
      leadCategorys: [],
      notices: [],
      slides: []
    }
  },
  watch: {
    currentCategory: function () {
      this.getLeads()
    }
  },
  created () {
    this.initData()
  },
  methods: {
    async initData () {
      this.getSlides()
      this.getNotices()
      this.getLeads()
      this.getLeadCategorys()
    },
    async getSlides () {
      let {success, data} = await articleAPI.fetchArticleStatus({status: 2})
      !success && this.$vux.alert.show({
        title: '错误提示',
        content: data.message
      })
      data.find((v) => {
        this.slides.push({url: '/article/view/' + v.id, img: v.thumb + '?x-oss-process=image/resize,w_400', title: v.title})
      })
    },
    async getNotices () {
      let {success, data} = await articleAPI.fetchArticleStatus({status: 1})
      !success && this.$vux.alert.show({
        title: '错误提示',
        content: data.message
      })
      this.notices = data
    },
    async getLeadCategorys () {
      let {success, data} = await categoryAPI.fetchCategorys({pid: 10})
      !success && this.$vux.alert.show({
        title: '错误提示',
        content: data.message
      })
      this.leadCategorys = data
    },
    async getLeads () {
      this.$vux.loading.show({ text: '获取数据...' })
      let {success, data} = await articleAPI.fetchArticleStatus({cid: this.currentCategory})
      this.$vux.loading.hide()
      !success && this.$vux.alert.show({
        title: '错误提示',
        content: data.message
      })
      this.leads = data
    },
    goView (id) {
      this.$router.push({path: `article/view/${id}`})
    }
  }
}
</script>

<style scoped lang="less">
.swiper-demo-img img {
  width: 100%;
}

.shoplist div{
	padding:3px 6px;
}

.list {
background:#fff;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
}
.icon-list {
text-align: center;
padding:10px 0px;
}
.icon-list .icon-list-span{
 font-size: 2em;
}

.icon-list .icon-list-p{
	display: block;
	font-size: 12px;
	color: #404240;
}

.demo-icon {
  font-family: 'vux-demo';
  font-size: 30px;
  color: #04BE02;
}
.card-padding{
  padding:10px;
}

@font-face {
  font-family: 'vux-demo';  /* project id 403491 */
  src: url('//at.alicdn.com/t/font_403491_oxfl4or1kgoxn7b9.eot');
  src: url('//at.alicdn.com/t/font_403491_oxfl4or1kgoxn7b9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_403491_oxfl4or1kgoxn7b9.woff') format('woff'),
  url('//at.alicdn.com/t/font_403491_oxfl4or1kgoxn7b9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_403491_oxfl4or1kgoxn7b9.svg#iconfont') format('svg');
}
</style>
